<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../css/sup_home.css">
    <title>监管部门</title>
</head>

<body>
<div id="supBox">
    <div id="header">
        <span id="welcome"> 欢 迎 使 用 药 品 溯 源 系 统 </span>
        <input type="button" class="logoutBtn" value="退出" @click="logout"/>
    </div>
    <el-row class="tac">
        <el-col :span="6">
            <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                     active-text-color="#ffd04b">
                <el-menu-item index="1" @click="change1">
                    <i class="el-icon-s-data"></i>
                    <span slot="title">药品溯源</span>
                </el-menu-item>
                <el-menu-item index="2" @click="change2">
                    <i class="el-icon-document"></i>
                    <span slot="title">药品溯源编码查询</span>
                </el-menu-item>
                <el-menu-item index="3" @click="change3">
                    <i class="el-icon-document"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="4" @click="change4">
                    <i class="el-icon-user"></i>
                    <span slot="title">个人中心</span>
                </el-menu-item>
            </el-menu>
        </el-col>
        <el-col :span="11" :offset="3">
            <div class="rightPage">
                <!-- 药品溯源 -->
                <el-form ref="form1" :model="form1" v-show="isShow==1">
                    <el-form-item>
                        <el-col :span="3">
                            <span>药品溯源编码</span>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="form1.traceableCode"></el-input>
                        </el-col>
                        <el-col :span="2" :offset="11">
                            <el-button type="success" @click="trace">溯源</el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <p><strong>药品生产数据</strong></p>
                    </el-form-item>
                    <el-form-item>
                        <el-table :data="manTable" border style="width: 100%" max-height="250" title="药品生产数据">
                            <el-table-column prop="traceableCode" label="药品溯源编码" width="120">
                            </el-table-column>
                            <el-table-column prop="name" label="药品名称" width="120">
                            </el-table-column>
                            <el-table-column prop="manName" label="药品生产商" width="120">
                            </el-table-column>
                            <el-table-column prop="batchNum" label="药品批号" width="100">
                            </el-table-column>
                            <el-table-column prop="approvalNum" label="药品批准文号" width="120">
                            </el-table-column>
                            <el-table-column prop="mfd" label="生产日期" width="120">
                            </el-table-column>
                            <el-table-column prop="exp" label="有效期" width="120">
                            </el-table-column>
                            <el-table-column prop="std" label="入库时间" width="120">
                            </el-table-column>
                            <el-table-column prop="other" label="附加信息" width="150">
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item>
                        <p><strong>药品运输数据</strong></p>
                    </el-form-item>
                    <el-form-item>
                        <el-table :data="traTable" border style="width: 100%" max-height="250" title="药品运输数据">
                            <el-table-column fixed label="序号" width="50">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="traceableCode" label="药品溯源编码" width="120">
                            </el-table-column>
                            <el-table-column prop="name" label="药品名称" width="120">
                            </el-table-column>
                            <el-table-column prop="manName" label="药品生产商" width="120">
                            </el-table-column>
                            <el-table-column prop="batchNum" label="药品批号" width="100">
                            </el-table-column>
                            <el-table-column prop="ostd" label="出库时间" width="120">
                            </el-table-column>
                            <el-table-column prop="buyer" label="买方名称" width="120">
                            </el-table-column>
                            <el-table-column prop="other" label="附加信息" width="150">
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item>
                        <p><strong>销售商购买数据</strong></p>
                    </el-form-item>
                    <el-form-item>
                        <el-table :data="selTable" border style="width: 100%" max-height="250" title="销售商购买数据">
                            <el-table-column fixed label="序号" width="50">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="traceableCode" label="药品溯源编码" width="120">
                            </el-table-column>
                            <el-table-column prop="drugName" label="药品名称" width="120">
                            </el-table-column>
                            <el-table-column prop="manName" label="药品生产商" width="125">
                            </el-table-column>
                            <el-table-column prop="batchNum" label="药品批号" width="100">
                            </el-table-column>
                            <el-table-column prop="seller" label="销售商名称" width="120">
                            </el-table-column>
                            <el-table-column prop="ard" label="到达日期" width="102">
                            </el-table-column>
                            <el-table-column prop="other" label="附加信息" width="140">
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item>
                        <p><strong>消费者购买数据</strong></p>
                    </el-form-item>
                    <el-form-item>
                        <el-table :data="conTable" border style="width: 100%" max-height="250" title="消费者购买数据">
                            <el-table-column fixed label="序号" width="50">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="traceableCode" label="药品溯源编码" width="120">
                            </el-table-column>
                            <el-table-column prop="consumer" label="消费者姓名" width="100">
                            </el-table-column>
                            <el-table-column prop="drugName" label="所购药品名称" width="120">
                            </el-table-column>
                            <el-table-column prop="batchNum" label="药品批号" width="100">
                            </el-table-column>
                            <el-table-column prop="sex" label="性别" width="50">
                            </el-table-column>
                            <el-table-column prop="idNumber" label="身份证号" width="130">
                            </el-table-column>
                            <el-table-column prop="contact" label="联系方式" width="120">
                            </el-table-column>
                            <el-table-column prop="seller" label="销售商名称" width="120">
                            </el-table-column>
                            <el-table-column prop="cond" label="购买日期" width="120">
                            </el-table-column>
                            <el-table-column prop="other" label="附加信息" width="150">
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>

                <!-- 药品溯源编码查询 -->
                <el-form ref="form2" :model="form2" v-show="isShow==2">
                    <el-form-item>
                        <el-col :span="3">
                            <span>药品生产商</span>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="form2.manName"></el-input>
                        </el-col>
                        <el-col :span="3" :offset="2">
                            <span>药品名称</span>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="form2.drugName"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="3" :offset="19">
                            <el-button @click="cleanForm">清空</el-button>
                        </el-col>
                        <el-col :span="2">
                            <el-button type="success" @click="searchCode">查询</el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-table :data="codeTable" border style="width: 100%" max-height="500">
                            <el-table-column fixed label="序号" width="50">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="traceableCode" label="药品溯源编码" width="150">
                            </el-table-column>
                            <el-table-column prop="manName" label="药品生产商名称" width="140">
                            </el-table-column>
                            <el-table-column prop="drugName" label="药品名称" width="150">
                            </el-table-column>
                            <el-table-column prop="batchNum" label="药品批号" width="140">
                            </el-table-column>
                            <el-table-column prop="mfd" label="生产日期" width="125">
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>

                <!-- 用户管理 -->
                <el-form ref="form2" :model="form3" v-show="isShow==3">
                    <el-form-item>
                        <h2>用户管理</h2>
                    </el-form-item>
                    <el-form-item>
                        <el-table :data="userTable" border style="width: 100%" max-height="500">
                            <el-table-column fixed label="序号" width="50">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="username" label="用户名" width="100">
                            </el-table-column>
                            <el-table-column prop="type" label="用户类型" width="100">
                            </el-table-column>
                            <el-table-column prop="name" label="机构名称" width="120">
                            </el-table-column>
                            <el-table-column prop="phoneNumber" label="电话号码" width="100">
                            </el-table-column>
                            <el-table-column prop="userStatus" label="用户状态" width="80">
                            </el-table-column>
                            <el-table-column prop="legal" label="负责人" width="80">
                            </el-table-column>
                            <el-table-column prop="address" label="地址" width="150">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small"
                                               @click.native.prevent="enable(scope.$index, userTable[scope.$index])">
                                        启用
                                    </el-button>
                                    <el-button type="text" size="small"
                                               @click.native.prevent="disable(scope.$index, userTable[scope.$index])">
                                        禁用
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>

                <!-- 个人中心 -->
                <el-form ref="form3" :model="form4" v-show="isShow==4">
                    <el-form-item>
                        <el-col :span="4">
                            <span><strong>用户名</strong></span>
                        </el-col>
                        <el-col :span="8">
                            <span>{{ form3.username }}</span>
                        </el-col>
                        <el-col :span="6" :offset="6">
                            <el-button @click="pwdOpen = true">修改密码</el-button>
                            <el-dialog title="修改密码" :visible.sync="pwdOpen">
                                <el-form :model="pwdForm">
                                    <el-form-item label="原密码" :label-width="formLabelWidth">
                                        <el-col :span="12">
                                            <el-input v-model="pwdForm.oldPwd" autocomplete="off"></el-input>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="新密码" :label-width="formLabelWidth">
                                        <el-col :span="12">
                                            <el-input v-model="pwdForm.newPwd" autocomplete="off"></el-input>
                                        </el-col>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="cancelChangePwd">取 消</el-button>
                                    <el-button type="primary" @click="changePwd">确 定</el-button>
                                </div>
                            </el-dialog>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="4">
                            <span><strong>手机号码</strong></span>
                        </el-col>
                        <el-col :span="8">
                            <span>{{ form3.phoneNumber }}</span>
                        </el-col>
                        <el-col :span="6" :offset="6">
                            <el-button @click="phoOpen = true">点击修改</el-button>
                            <el-dialog title="修改手机号码" :visible.sync="phoOpen">
                                <el-form :model="phoForm">
                                    <el-form-item label="新手机号码" :label-width="formLabelWidth">
                                        <el-col :span="12">
                                            <el-input v-model="phoForm.param" autocomplete="off"></el-input>
                                        </el-col>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="cancelChangePho">取 消</el-button>
                                    <el-button type="primary" @click="changePho">确 定</el-button>
                                </div>
                            </el-dialog>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="4">
                            <span><strong>部门名称</strong></span>
                        </el-col>
                        <el-col :span="8">
                            <span>{{ form3.supName }}</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="4">
                            <span><strong>归属地</strong></span>
                        </el-col>
                        <el-col :span="20">
                            <span>{{ form3.address }}</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="4">
                            <span><strong>账号管理人</strong></span>
                        </el-col>
                        <el-col :span="8">
                            <span>{{ form3.manager }}</span>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../../js/sup_home.js"></script>
</body>

</html>